import React, { useState, useEffect } from "react";
import Button from "antd/lib/button";
import Divider from "antd/lib/divider";
import Timeline from "antd/lib/timeline";
import EmployeeActivity from "@/services/employeeactivity";
import Modal from "antd/lib/modal";
import { currentUser } from "@/services/auth";
import { UserProfile } from "@/components/proptypes";
import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
import CreateFollowUpDialog from "@/components/employee/FollowUpDialog";


function EmployeeActivityDialog({ sourceid, sourcetype,canedit, dialog }) {
  const [gdata, setgdata] = useState([]);

  useEffect(() => {
    EmployeeActivity.getbyemployeeid({ employeeid: sourceid, sourcetype: sourcetype }).then(data => {
      if (data.length > 0) {
        setgdata(data);
      } 
    }).catch(error => {
    });
  }, [sourceid]);// eslint-disable-line react-hooks/exhaustive-deps
  function handleSubmit() {
    dialog.close({ success: true });
  }
  function handleedit(employeeactivityid) {
    CreateFollowUpDialog.showModal({ employeeactivityid: employeeactivityid, employeeid: sourceid, sourcetype: sourcetype })
      .onClose((result = {}) => {
        if (result.success) {
          EmployeeActivity.getbyemployeeid({ employeeid: sourceid, sourcetype: sourcetype }).then(data => {
            if (data.length > 0) {
              setgdata(data);
            } else {
            }
          }).catch(error => {
          });
        }
      }).onDismiss(() => {
      });
  };
  const pushbill = (items) => {
    return (<Timeline.Item dot={<i className="fa fa-home m-r-5" />} color="blue">
      {currentUser.id === items.userid && canedit && (<Button type="primary" onClick={() => handleedit(items.id)}>
        <i className="fa fa-plus m-r-5" />
        修改
      </Button>)}
      <b>日期：{items.created_ed}</b><b>&nbsp;&nbsp;&nbsp;跟进人：{items.username}</b> <b>&nbsp;&nbsp;&nbsp;跟进内容：</b><br />
      <div dangerouslySetInnerHTML={{ __html: items.message }}></div>
    </Timeline.Item>);
  };

  return (
    <Modal
      {...dialog.props}
      // {...({ footer: null })}
      width={document.querySelector('body').offsetWidth * 0.8}
      title="跟进信息"
      footer={[
        <Button key="back" onClick={handleSubmit}>
          关闭
        </Button>,]}
      wrapProps={{
        "data-test": "CreateDashboardDialog",
      }}>
      <div>
        { canedit && (<div style={{ marginBottom: 16 }}>
          <Divider type="vertical" />
          <Button type="primary" style={{ margin: "10px" }} onClick={() => handleedit(0)} >
            <i className="fa fa-plus m-r-5" />
            新增跟进记录
          </Button>
        </div>)}
        <div>
          <Divider type="horizontal" />
          <Timeline style={{ background: '#fff' }}>
            {(gdata || []).map(item => (
              pushbill(item)
            ))}
          </Timeline>
        </div>
      </div>
    </Modal>
  );
}
EmployeeActivityDialog.propTypes = {
  sourceid: UserProfile.isRequired,
  dialog: DialogPropType.isRequired,
};

export default wrapDialog(EmployeeActivityDialog);
